<template>
	<view class="prohibition">
		<view class="demo" :style="[{color},{background}]">
			<image class="poAb top-0  z-index--1 width-100 height-100"  :src="backgroundImage" mode="widthFix" ></image>
			<!-- 左侧返回按钮 -->
			<view class="left display align-items" @click="onBack" :style="[{color},{paddingTop}]" v-if="!isback">
				<tm-icon name="tmicon-angle-down" :rotate-deg="90"  fontSize="32" v-if="back" :color='color'></tm-icon>
				<!-- 此处图标使用的是 uni-ui图标 -->
				<text class="ml30 fontSize-36">{{name}}</text>
			</view>
			<!-- 左侧自定义内容——老邻居购物车 -->
			<view class="left display align-items" @click="onBack" :style="[{color},{paddingTop}]" v-if="isback">
				<slot name="left_conent"></slot>
			</view>
			<!-- 中间标题文字 -->
			<view class="title">
				<text>{{title}}</text>
				<image :src="centerlogo" v-if="centerlogo" style="width: 130rpx;height: 42rpx;" ></image>
			</view>
			<view class="right" @click="emitEvent">
				<text>{{right_title}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onBeforeMount } from 'vue';
	const props = defineProps({
		title: { // 标题文字(默认为空)
			type: String,
			default: ''
		},
		name: { // 标题文字(默认为空)
			type: String,
			default: ''
		},
		backgroundImage: { // 标题文字(默认为空)
			type: String,
			default: ''
		},
		color: { // 标题和返回按钮颜色(默认白色)
			type: String,
			default: '#ffffff'
		},
		//建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
		background: { // 背景颜色(不传值默认透明)
			type: String,
			default: '#ffffff'
		},
		centerlogo:{
			type: String,
			default: ''
		},
		back: { // 是否显示返回按钮(不传值默认不显示)
			type: Boolean,
			default: false
		},
		isback: { // 是否显示自定义左侧内容(不传值默认不显示)
			type: Boolean,
			default: false
		},
		right_title:{//右侧文字
			type: String,
			default: ''
		}
	})
	let height = ref(0)
	let paddingTop =ref(0)
	onBeforeMount(() => {
		// const demo = uni.getMenuButtonBoundingClientRect()
		// console.log(demo,123)
		// height.value = demo.height + "px"
		// paddingTop.value = demo.top + "px"
	})
	const onBack=()=>{
		uni.navigateBack({
			delta: 1
		})
	}
	//	定义返回给父组件的方法
	const emit = defineEmits(['change'])
	const emitEvent = () => {
     emit('change');
    }
	//	抛出子组件方法让父组件调用
		defineExpose({
			emitEvent
		})
</script>

<style lang="scss">
	.demo {
		// background-image: url('/static/bg1.png');
		background-size: 100% 100%;
		// position: relative;//注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		z-index: 100;
		padding-bottom: 10rpx;
		overflow: hidden;
		top: 0;
		padding-top: var(--status-bar-height);
		height: 88rpx;
		.left {
			float: left;
			position: absolute;
			// width: 100rpx;
			height: 50rpx;
			/* #ifdef H5 */
			top: 0;
			/* #endif */
			/* #ifdef APP */
			top: 68rpx;
			/* #endif */
			bottom: 0;
			left: 20rpx;
			color: #fff;
			margin: auto;
		}

		.title {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			// color: #FFFFFF;
		}
		.right{
			right: 20rpx;
			position: absolute;
			font-size: 28rpx;
		}
	}
</style>
